<template>
  <div class="account-title">
    <div class="back-icon">
      <span style="font-size: 8vw;" @click="goBack()">←</span>
    </div>
    <div class="title-text">
      <p>账号管理</p>
    </div>
  </div>
  <div class="account-management">
    <div class="form-item">
      <label>账号</label>
      <input placeholder="请输入昵称" style="font-size: 3vw;" v-model="username" />
    </div>
    <div class="form-item">
      <label>名称</label>
      <input placeholder="请输入昵称" style="font-size: 3vw;" v-model="nickname" />
    </div>
    <div class="form-item">
      <label>个性签名</label>
      <input placeholder="请输入个性签名" v-model="signature" value="授人与鱼不如授人与渔" style="font-size: 3vw;" />
    </div>
    <div class="form-item">
      <label>修改密码</label>
      <input placeholder="请输入密码" v-model="password" style="font-size: 3vw;" />
    </div>
    <button class="save-button" @click="save()" style="width: 35vw; height:9vw; font-size: 2vw;">保存</button>
    <button class="logout-button" @click="logout()"  style=" width: 35vw; height:9vw; font-size: 2vw;">退出登录</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';

const data = reactive({
  username: '',
  signature: '',
  password: '',
  nickname: '',
})

const { username, signature, password, nickname } = { ...toRefs(data) }

const router = useRouter()
function goBack() {
  router.push('./my')
}

//退出登录
function logout() {
  localStorage.removeItem('isLogin')
  router.push('./')
}

//保存
function save() {
  if (username.value === '' || signature.value === '' || password.value === '' || nickname.value === '') {
    alert('请填写完整信息')
    return
  }

  const u = JSON.parse(localStorage.userInfo)
  const newUserInfo = { username: u['username'], nickname: nickname.value, signature: signature.value, password: password.value }

  localStorage.setItem('userInfo', JSON.stringify(newUserInfo))
  alert('保存成功')
  router.push('./my')
}
</script>

<style scoped>
.account-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  white-space: nowrap;
}

.back-icon {
  position: relative;
  left: 0;

}

.title-text {
  text-align: center;
  width: 100%;
  font-size: 5vw;
}

.account-management {
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 300px;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
  margin-top: 25px;
}

.form-item {
  margin-bottom: 35px;
  width: 160px;
  height: 10px;
  font-size: 6vw;
}

.form-item label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-item input {
  width: 70%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.save-button,
.logout-button {
  display: block;
  padding: 10px;
  background-color: #ffc107;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.save-button {
  margin-bottom: 5px;
}

/* 媒体查询，根据不同屏幕宽度调整样式 */
@media (max-width: 480px) {
  .account-management {
    width: 70%;
  }

  .form-item input {
    font-size: 14px;
  }

  .save-button,
  .logout-button {
    font-size: 14px;
  }
}
</style>